<template>
  <div class="page-wrap"> 
    <div class="page-wrap-body">
      <park-table :tableConfig="tableConfig" :data="data" :total="total" :loading="loading" @onSize="onSize">
        <template #state="{row,index}">
          <el-select
            v-model="row.state"
            placeholder="选择帐号状态"
            :loading="row.loading"
            :disabled="row.loading"
            size="small"
            @change="onselect(index, $event)"
          >
            <el-option
              v-for="item in stateData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </template>
        <template #avatar="{row}">
          <div v-if="row.avatar"  class="page-wrap-avatar" :style="{background: 'url('+row.avatar+') no-repeat'}"></div>
          <div v-if="!row.avatar" class="page-wrap-avatar"></div>
        </template>
        <template #options="{row}">
         <div class="flex-row align-items-center justify-center">
            <park-button @click="setChange(row)" size="small">充值</park-button>
            <div class="ml-8">
              <park-button type="danger" @click="setDelChange(row)" size="small">移除</park-button>
              <!-- <el-popconfirm width="250" title="移除后，该员工将无法使用企业账户的余额，但操作的历史数据将会被保留，请慎重操作。" @confirm="freeze(row)">
                <template #reference>
                  <park-button type="danger">移除</park-button>
                </template>
              </el-popconfirm> -->
            </div>
         </div> 
        </template>
      </park-table>
    </div>
    <park-dialog title="" @onClose="isChange=false" @confirm="confirm" v-if="isChange">
      <div class="flex-row">
        <div class="w-90 text-right pr-10 mb-12 f-14">企业余额</div>
        <div>{{userInfo?.organization?.company?.quota - userInfo?.organization?.company?.usage}}</div>
      </div>
      <park-from :formConfig="formConfig" ref="ruleFrom"></park-from>
    </park-dialog>

    <park-dialog title="" @onClose="isDelChange=false" @confirm="freeze" v-if="isDelChange">
      <div class="flex-row">
        移除后，该员工将无法使用企业账户的余额，但操作的历史数据将会被保留，请慎重操作
      </div>
    </park-dialog>


  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { employeeGetPageList, employeeRecharge , employeeState, employeeBlock, getUserInfo, employeeRemove} from '@/api/api'
import { getTime } from '@/utils/utils'
import { Toast } from '@/utils/vant'
import parkTable from '@/components/pkui/pktable/pktable.vue'
import parkButton from '@/components/pkui/pkbutton/pkbutton.vue'
import parkDialog from '@/components/pkui/pkdialog/pkdialog.vue'
import parkFrom from '@/components/pkui/pkfrom/pkfrom.vue'
const ruleFrom = ref()
const formConfig = ref([
  {
    label: '充值金额',
    prop: 'amount',
    type: 'number',
    max: 100000,
    required: true
  }
])
const curData = ref({})
const data = ref([])
const page = ref(1)
const total = ref(0)
const isChange = ref(false)
const isDelChange = ref(false)
const loading = ref(false)
const userInfo = ref({})
const stateData = ref([
  {
    label:'冻结',
    value: 0
  },
  {
    label:'正常',
    value: 1
  }
])
const tableConfig = ref([
  {
    label: '序号',
    type: 'index',
  },
  {
    label: '头像',
    prop: 'avatar',
    width: '60px',
    type: 'slot',
    slotName: 'avatar'
  },
  {
    label: '姓名',
    prop: 'fullname',
    width: '120px',
  },
  {
    label: '手机号',
    prop: 'phone',
    width: '150px',
  },
  {
    label: '邮箱', 
    prop: 'email',
    width: '200px'
  },
  {
    label: '用量', 
    type: 'render',
    width: '120px',
    render(e) {
      return `${e.quota}/${e.usage}`
    },
  },
  {
    label: '帐号状态',
    prop: 'status',
    type: 'slot',
    slotName: 'state',
    width: '90px',
    // render(e) {
    //   return e.state == 1 ? '正常' : '冻结'
    // },
  },
  {
    label: '管理员',
    prop: 'admin',
    type: 'render',
    width: '70px',
    render(e) {
      return e.admin ? '是' : '否'
    },
  },
  {
    label: '创建时间',
    width: '200px',
    prop: 'created_at',
    type: 'render',
    render(e) {
      return  e.created_at ? getTime(e.created_at, 'time') : '- -'
    },
    
  },
  {
    label: '更多操作',
    fixed:'right',
    type:'slot',
    slotName:'options',
    minWidth: '160px'
  },
  
])

const confirm = (e) => {
  ruleFrom.value.getValue().then(res => {
    if (res.amount < 1) {
      Toast('充值金额必须大于等于1')
      return
    }
    employeeRecharge({
      employee_id: curData.value.employee_id,
      amount: res.amount
    }).then((a) => {
      isChange.value = false
      getInit()
    })
  })
}


const getUserInfoData = () => {
  getUserInfo().then(res => {
    userInfo.value = {
      ...res.data,
      employee: {
        ...res.data.employee,
        balance: res.data.organization.quota - res.data.organization.usage
      }
    }
    formConfig.value[0].max = res.data.organization.quota - res.data.organization.usage
  })
}

const getInit = () => {
  loading.value = true
  let param = {
    page: page.value
  }
  console.log('----param----', param)
  employeeGetPageList(param).then(res => {
    data.value = res.data.list.map(item => {
      return {
        ...item,
        copyState: item.state,
        loading: false
      }
    })
    total.value = res.data.total
    setTimeout(() => {
      loading.value = false
    }, 300)
  }).catch(_ => {
    setTimeout(() => {
      loading.value = false
    }, 300)
  })
}

const freeze = () => {
  employeeRemove({
    employee_id: curData.value.employee_id
  }).then(res => {
    getInit()
  })
}

const setDelChange = (e) => {
  curData.value = e
  isDelChange.value = true
}

const setChange = async (e) => {
  console.log('-------------', e)
  await getUserInfoData()
  curData.value = e
  isChange.value = true
}


const onSize = (e) => {
  page.value = e.page
  getInit()
}

const onselect = (index,e) => {
  data.value[index].loading = true
  const tempdata  = data.value[index]
  employeeState({
    employee_id: tempdata.employee_id,
    state: e
  }).then(res => {
    data.value[index].loading = false
    data.value[index].copyState = data.value[index].state
    // getInit()
  }).catch(() => {
    data.value[index].loading = false
    data.value[index].state = data.value[index].copyState
  })
}

onMounted(() => {
  getInit()
})
</script>

<style lang="scss" scoped>
.page-wrap{
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding-bottom: 24px;
  background: #f8f8f8;
  font-size: 14px;
  // color: #000; 
  overflow: hidden;
  padding-top: 50px;
  &-body{
    min-width: 320px;
    max-width: 988px;
    margin: 24px auto;
    padding:0 16px;
  }

  &-avatar{
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background: #000;
    background: url('@/assets/image/default_p.jpg') center center no-repeat;
    background-size:cover!important;
  }
}
</style>